<!--
  功能：功能描述
  作者：mazhiqiang
  邮箱：MZQ13673984186@163.com
  时间：2024年01月05日 17:23:31
  版本：v1.0
-->
<template>
    <div class="vehicle-box">
        <div class="normal-box">
            <span class="info-title">车辆定位</span>
        </div>
        <div id="vehicleMap">

        </div>

        <div class="left-pop-box">
            <div class="top">
                <Input v-model="value"
                       placeholder="请输入车牌号"
                       style="width: 130px" />
                <DatePicker type="date"
                            placeholder="选择日期"
                            style="width: 130px"></DatePicker>
                <Button type="primary"
                        @click="iQuery">查询</Button>
            </div>
            <div class="content"
                 v-for="(item,index) in vehicleData">
                <div>
                    {{item.name}}
                </div>
                <div>
                    {{item.code}}
                </div>
                <div>
                    <Button type="primary">查看详情</Button>
                </div>
            </div>
            <div class="bottom">
                <Page :total="queryVehicleData.totalRecord"
                      :current="queryVehicleData.page"
                      :page-size="queryVehicleData.limit"
                      @on-change="changePage"
                      show-total
                      show-elevator
                      style="text-align: center" />
            </div>
        </div>
        <ul class="drawing-panel"
            style="z-index: 99;">
            <li class="btn"
                @click="pauseAni">暂停</li>
            <li class="btn"
                @click="continueAni">继续</li>
        </ul>
    </div>
</template>
<script>
import gcDispenserApi from '@/api/base_sys/gcDispenser.js'
export default {
	data() {
		return {
			url: '/api/sysHomepagesignin/list',
			// 页面查询数据
			queryData: {
				limit: 10,
				page: 1,
				totalRecord: 0,
				startTime: '2020-01-01',
				endTime: '2020-01-01'
			},
			map: '',
			queryVehicleData: {
				// 获取列表参数
				limit: 10,
				page: 1,
				totalRecord: 0,
				// licensePlateNumber: '',
				sbType: 2
			},
			vehicleData: [],
			// 山东青岛车辆轨迹坐标
			PointArr: [
				{ lat: 36.10339957700999, lng: 120.4207801005104 },
				{ lat: 36.10349055332635, lng: 120.42113539348455 },
				{ lat: 36.10370795896673, lng: 120.42162977768736 },
				{ lat: 36.10411490190429, lng: 120.42166901055167 },
				{ lat: 36.104232027406695, lng: 120.42185015059275 },
				{ lat: 36.10425620255758, lng: 120.42202022562539 },
				{ lat: 36.104265908631284, lng: 120.42208225102176 },
				{ lat: 36.104399968669526, lng: 120.42187425183421 },
				{ lat: 36.10452708476511, lng: 120.42076268466177 },
				{ lat: 36.10480132817409, lng: 120.4196557913201 },
				{ lat: 36.10560773716036, lng: 120.418951386886 },
				{ lat: 36.10621159088823, lng: 120.41900182905378 },
				{ lat: 36.1064641068988, lng: 120.41992809616544 },
				{ lat: 36.10679444086644, lng: 120.42102125032955 },
				{ lat: 36.107010189089046, lng: 120.42182982905027 },
				{ lat: 36.107014665948654, lng: 120.42193587265254 },
				{ lng: 120.42201589513277, lat: 36.10700627324672 },
				{ lng: 120.42236704579075, lat: 36.10708566579729 },
				{ lng: 120.42269817692573, lat: 36.107201270041955 },
				{ lng: 120.42239277578172, lat: 36.10812797579566 },
				{ lng: 120.42175457671763, lat: 36.10947659586882 },
				{ lng: 120.42144906678747, lat: 36.11028554037044 },
				{ lng: 120.4213722360578, lat: 36.110547069787465 },
				{ lng: 120.42134433787885, lat: 36.110691285540966 },
				{ lng: 120.42234193234574, lat: 36.110931417305515 },
				{ lng: 120.42374305054953, lat: 36.11109804633305 },
				{ lng: 120.42478859440246, lat: 36.111102173671576 },
				{ lng: 120.42606467439863, lat: 36.11129314178323 },
				{ lng: 120.4274220550685, lat: 36.11148065963647 },
				{ lng: 120.42831965719076, lat: 36.111638311669736 },
				{ lng: 120.42839951065358, lat: 36.11164240198062 },
				{ lng: 120.42869196887202, lat: 36.1116737914188 },
				{ lng: 120.43031048017785, lat: 36.11190642360766 },
				{ lng: 120.43239173942534, lat: 36.11229570404404 },
				{ lng: 120.43368467575368, lat: 36.11281195352835 },
				{ lng: 120.43371757862009, lat: 36.11284016439977 },
				{ lng: 120.43379230066179, lat: 36.11284161798212 },
				{ lng: 120.43441423254144, lat: 36.113205746094536 },
				{ lng: 120.43549342023326, lat: 36.11391074053337 },
				{ lng: 120.43637497341942, lat: 36.11441797319607 },
				{ lng: 120.4365024200745, lat: 36.11445405475196 },
				{ lng: 120.43670459776231, lat: 36.11458083085174 },
				{ lng: 120.43745246924915, lat: 36.11507070008782 },
				{ lng: 120.43821097991501, lat: 36.115416050767585 },
				{ lng: 120.43823585473245, lat: 36.11541929557907 },
				{ lng: 120.43859812511984, lat: 36.115583971494395 },
				{ lng: 120.43901701857004, lat: 36.115714318017346 },
				{ lng: 120.43928467292172, lat: 36.11582517772885 },
				{ lng: 120.43959708522435, lat: 36.115963587312805 },
				{ lng: 120.43986466921422, lat: 36.116047547858166 },
				{ lng: 120.44007952157578, lat: 36.11611896447754 },
				{ lng: 120.440167025596, lat: 36.11612294605039 },
				{ lng: 120.44024360205321, lat: 36.116138815526504 },
				{ lng: 120.44026150723737, lat: 36.11614702160796 },
				{ lng: 120.44027344364953, lat: 36.11615215895656 },
				{ lng: 120.44028836484941, lat: 36.1161593311561 },
				{ lng: 120.44034209724579, lat: 36.116201960713745 },
				{ lng: 120.44048233691922, lat: 36.116254585044935 },
				{ lng: 120.4405738257871, lat: 36.116276646228826 },
				{ lng: 120.44073595695149, lat: 36.11635856195875 },
				{ lng: 120.44115463412841, lat: 36.11652357056175 },
				{ lng: 120.44118546544034, lat: 36.11653994619434 },
				{ lng: 120.44121529948468, lat: 36.1165533090833 }
			],
			myIcon: '',
			drivingPoint: '',
			startPoint: '',
			terminalPoint: '',
			interval: null,
			carMk: '',
			track: ''
		}
	},
	created() {
		this.deArea()
	},
	mounted() {
		// this.initMap()
		//this.getMapData()
		//this.getVehicleData()
		//this.luShu()
        this.init()
	},
	computed: {},
	methods: {
        init() {
				ihgAppJssdk.user.getLocation({
					// appId: "HG_GYL_MFP",
					success: function(data) {
						console.log(data.data,'22222222222')
					}
				})
			},
		deArea() {
			let area = window.defArea
			if (area) {
				this.queryData.provid = area[0]
				this.queryData.cityid = area[1]
				this.queryData.distid = area[2]
			}
		},
		// 初始化地图
		initMap() {
			var map = new BMapGL.Map('vehicleMap') // 创建Map实例
			map.centerAndZoom(new BMapGL.Point(120.214935, 30.256576), 12) // 初始化地图,设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
			this.map = map
		},
		// 地图点位数据
		async getMapData() {
			let result = await gcDispenserApi.getData(this.url, this.queryData)
			let data = result.data.list
			// 创建点标记
			// var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925))
			data.map(item => {
				var point = new BMapGL.Point(
					item.signlongitude,
					item.signlatitude
				)
				var marker = new BMapGL.Marker(point)
				// 在地图上添加点标记
				this.map.addOverlay(marker)
				// 创建信息窗口
				var opts = {
					width: 200,
					height: 100,
					title: `${item.username}`
				}
				var infoWindow = new BMapGL.InfoWindow(
					`地址:${item.signaddress}`,
					opts
				)
				// 修改信息窗口标题和内容样式
				infoWindow.setTitle(
					`<p style="font-size:14px;margin-bottom:15px;color:#000">${item.username}</p>`
				)
				infoWindow.setContent(
					`<div><p style='font-size:12px;line-height:20px;color:red'>地址:${item.signaddress}</p></div>`
				)

				// 点标记添加点击事件
				marker.addEventListener('click', function() {
					this.map.openInfoWindow(infoWindow, point) // 开启信息窗口
				})
			})
		},

		async getVehicleData() {
			this.queryVehicleData.totalRecord = undefined
			let result = await gcDispenserApi.getVehicleData(
				'/api/gcDustbin',
				this.queryVehicleData
			)
			let list = result.data.list
			this.vehicleData = list
			this.queryVehicleData.totalRecord = result.data.totalRecord
			this.queryVehicleData.limit = result.data.pageSize
			// this.queryVehicleData.page = result.data.pageNum
		},
		changePage(v) {
			this.queryVehicleData.page = v
			this.getVehicleData()
		},
		// 车辆轨迹
		carDrawFn() {
			// 第一条线路
			var i = 0
			this.interval = setInterval(() => {
				if (i >= this.PointArr.length) {
					clearInterval(this.interval)
					return
				}
				this.drowLine(this.map, this.PointArr[i], this.PointArr[i + 1]) //画线调用
				i = i + 1
			}, 1000)
		},
		// 第一条 划线
		drowLine(map, PointArr, PointArrNext) {
			this.drivingPoint = new BMapGL.Icon(
				require('@/assets/images/che.jpg'),
				new BMapGL.Size(52, 26),
				{
					anchor: new BMapGL.Size(27, 13),
					imageSize: new BMapGL.Size(70, 35)
				}
			)
			// 起点图标
			this.startPoint = new BMapGL.Icon(
				require('@/assets/images/qidian.png'),
				new BMapGL.Size(45, 45),
				{
					anchor: new BMapGL.Size(20, 45),
					imageSize: new BMapGL.Size(45, 45)
				}
			)
			//终点图标
			this.terminalPoint = new BMapGL.Icon(
				require('@/assets/images/zhongdian.png'),
				new BMapGL.Size(45, 45),
				{
					anchor: new BMapGL.Size(20, 45),
					imageSize: new BMapGL.Size(45, 45)
				}
			)

			if (PointArrNext != undefined) {
				var polyline = new BMapGL.Polyline(
					[
						new BMapGL.Point(PointArr.lng, PointArr.lat),
						new BMapGL.Point(PointArrNext.lng, PointArrNext.lat)
					],
					{
						strokeColor: 'skyblue',
						strokeWeight: 7,
						strokeOpacity: 1
					}
				) //创建折线
				map.addOverlay(polyline)
				this.addMarkerEnd(
					new BMapGL.Point(PointArrNext.lng, PointArrNext.lat),
					'小车行驶',
					map,
					PointArrNext,
					new BMapGL.Point(PointArr.lng, PointArr.lat)
				) //添加图标
			} else {
				return
			}
		},
		// 第一条 添加行驶和终点图标
		addMarkerEnd(point, name, mapInit, trackUnit, prePoint) {
			if (name == '小车行驶') {
				if (this.carMk) {
					mapInit.removeOverlay(this.carMk)
				}
				// debugger;
				this.carMk = new BMapGL.Marker(point, {
					icon: this.drivingPoint
				}) // 创建标注
				this.carMk.setRotation(trackUnit.route) //trackUnit.route
				this.carMk.setRotation(this.getAngle(point, prePoint) - 90) // 旋转的角度
				this.map.addOverlay(this.carMk) // 将标注添加到地图中
				// 起点
				var start = new BMapGL.Marker(
					new BMapGL.Point(120.4207801005104, 36.10339957700999),
					{
						icon: this.startPoint
					}
				)
				this.map.addOverlay(start) // 将标注添加到地图中
				// 终点
				var end = new BMapGL.Marker(
					new BMapGL.Point(120.44121529948468, 36.1165533090833),
					{
						icon: this.terminalPoint
					}
				)
				this.map.addOverlay(end) // 将标注添加到地图中
			} else {
				mapInit.removeOverlay(this.carMk)
				this.carMk = new BMapGL.Marker(point, {
					icon: this.terminalPoint
				}) // 创建标注
				mapInit.addOverlay(this.carMk)
			}
		},

		//获得角度的函数
		getAngle(n, next) {
			var ret
			var w1 = (n.lat / 180) * Math.PI
			var j1 = (n.lng / 180) * Math.PI
			var w2 = (next.lat / 180) * Math.PI
			var j2 = (next.lng / 180) * Math.PI
			ret =
				4 * Math.pow(Math.sin((w1 - w2) / 2), 2) -
				Math.pow(
					Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)),
					2
				)
			ret = Math.sqrt(ret)
			var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
			ret = ret / temp
			ret = (Math.atan(ret) / Math.PI) * 180
			ret += 90
			if (j1 - j2 < 0) {
				if (w1 - w2 < 0) {
					ret
				} else {
					ret = -ret + 180
				}
			} else {
				if (w1 - w2 < 0) {
					ret = 180 + ret
				} else {
					ret = -ret
				}
			}
			return ret
		},
		// 此处用查询方法控制小车轨迹运动并将第一个坐标点设置为中心点
		iQuery() {
			this.map.centerAndZoom(
				new BMapGL.Point(120.4207801005104, 36.10339957700999),
				15
			) // 初始化地图,设置中心点坐标和地图级别
			this.carDrawFn()
			this.continue()
		},
		luShu() {
			var path = [
				new BMapGL.Point(120.4207801005104, 36.10339957700999),
				new BMapGL.Point(120.42113539348455, 36.10349055332635),
				new BMapGL.Point(120.42162977768736, 36.10370795896673),
				new BMapGL.Point(120.42166901055167, 36.10411490190429),
				new BMapGL.Point(120.42185015059275, 36.104232027406695),
				new BMapGL.Point(120.42202022562539, 36.10425620255758),
				new BMapGL.Point(120.42208225102176, 36.104265908631284),
				new BMapGL.Point(120.42187425183421, 36.104399968669526),
				new BMapGL.Point(120.42076268466177, 36.10452708476511),
				new BMapGL.Point(120.4196557913201, 36.10480132817409),
				new BMapGL.Point(120.418951386886, 36.10560773716036),
				new BMapGL.Point(120.41900182905378, 36.10621159088823),
				new BMapGL.Point(120.41992809616544, 36.1064641068988),
				new BMapGL.Point(120.42102125032955, 36.10679444086644),
				new BMapGL.Point(120.42182982905027, 36.107010189089046),
				new BMapGL.Point(120.42193587265254, 36.107014665948654),
				new BMapGL.Point(120.42201589513277, 36.10700627324672),
				new BMapGL.Point(120.42236704579075, 36.10708566579729),
				new BMapGL.Point(120.42269817692573, 36.107201270041955),
				new BMapGL.Point(120.42239277578172, 36.10812797579566),
				new BMapGL.Point(120.42175457671763, 36.10947659586882),
				new BMapGL.Point(120.42144906678747, 36.11028554037044),
				new BMapGL.Point(120.4213722360578, 36.110547069787465),
				new BMapGL.Point(120.42134433787885, 36.110691285540966),
				new BMapGL.Point(120.42234193234574, 36.110931417305515),
				new BMapGL.Point(120.42374305054953, 36.11109804633305),
				new BMapGL.Point(120.42478859440246, 36.111102173671576),
				new BMapGL.Point(120.42606467439863, 36.11129314178323),
				new BMapGL.Point(120.4274220550685, 36.11148065963647),
				new BMapGL.Point(120.42831965719076, 36.111638311669736),
				new BMapGL.Point(120.42839951065358, 36.11164240198062),
				new BMapGL.Point(120.42869196887202, 36.1116737914188),
				new BMapGL.Point(120.43031048017785, 36.11190642360766),
				new BMapGL.Point(120.43239173942534, 36.11229570404404),
				new BMapGL.Point(120.43368467575368, 36.11281195352835),
				new BMapGL.Point(120.43371757862009, 36.11284016439977),
				new BMapGL.Point(120.43379230066179, 36.11284161798212),
				new BMapGL.Point(120.43441423254144, 36.113205746094536),
				new BMapGL.Point(120.43549342023326, 36.11391074053337),
				new BMapGL.Point(120.43637497341942, 36.11441797319607),
				new BMapGL.Point(120.4365024200745, 36.11445405475196),
				new BMapGL.Point(120.43670459776231, 36.11458083085174),
				new BMapGL.Point(120.43745246924915, 36.11507070008782),
				new BMapGL.Point(120.43821097991501, 36.115416050767585),
				new BMapGL.Point(120.43823585473245, 36.11541929557907),
				new BMapGL.Point(120.43859812511984, 36.115583971494395),
				new BMapGL.Point(120.43901701857004, 36.115714318017346),
				new BMapGL.Point(120.43928467292172, 36.11582517772885),
				new BMapGL.Point(120.43959708522435, 36.115963587312805),
				new BMapGL.Point(120.43986466921422, 36.116047547858166),
				new BMapGL.Point(120.44007952157578, 36.11611896447754),
				new BMapGL.Point(120.440167025596, 36.11612294605039),
				new BMapGL.Point(120.44024360205321, 36.116138815526504),
				new BMapGL.Point(120.44026150723737, 36.11614702160796),
				new BMapGL.Point(120.44027344364953, 36.11615215895656),
				new BMapGL.Point(120.44028836484941, 36.1161593311561),
				new BMapGL.Point(120.44034209724579, 36.116201960713745),
				new BMapGL.Point(120.44048233691922, 36.116254585044935),
				new BMapGL.Point(120.4405738257871, 36.116276646228826),
				new BMapGL.Point(120.44073595695149, 36.11635856195875),
				new BMapGL.Point(120.44115463412841, 36.11652357056175),
				new BMapGL.Point(120.44118546544034, 36.11653994619434),
				new BMapGL.Point(120.44121529948468, 36.1165533090833)
			]
			var polyline = new BMapGL.Polyline(path, {
				clip: false,
				geodesic: true,
				strokeWeight: 3,
				strokeColor: 'skyblue' //设置颜色,
			})
			this.map.addOverlay(polyline)
		},
		continue() {
			var point = []
			for (var i = 0; i < this.PointArr.length; i++) {
				point.push(
					new BMapGL.Point(this.PointArr[i].lng, this.PointArr[i].lat)
				)
			}
			var pl = new BMapGL.Polyline(point)
			var icon = require('@/assets/images/che.jpg')
			//设备id
			var sbIcon = new BMapGL.Icon(
				'@/assets/images/che.jpg',
				new BMapGL.Size(30, 30)
			)
			var marker = new BMapGL.Marker(new BMapGL.Point(120.42201589513277, 36.10700627324672), {
				icon: sbIcon
			})
			// 将标注添加到地图
			this.map.addOverlay(marker) 
			var trackAni = new BMapGLLib.TrackAnimation(this.map, pl, {
				overallView: true,
				tilt: 30,
				duration: 20000,
				delay: 300,
				// Icon: this.drivingPoint
			})
			this.track = trackAni
			setTimeout(() => {
				this.track.start()
			}, 3000)
		},
		// start() {
		// 	this.track.start()
		// },
		pauseAni() {
			this.track.pause()
		},
		continueAni() {
			this.track.continue()
		}
	}
}
</script>
<style scoped>
.vehicle-box {
	position: relative;
}
body,
html,
#vehicleMap {
	width: 100%;
	/* bug:必须要设置高,否则地图不显示,不能设置单位为%,比如90% */
	height: 90vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: '微软雅黑';
}
.info-title {
	position: relative;
	padding-left: 10px;
	font-size: 20px;
	font-weight: bolder;
}
.info-title:before {
	content: '';
	background-color: #3796ec;
	width: 3px;
	height: 18px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -9px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.left-pop-box {
	position: absolute;
	left: 0;
	bottom: 10vh;
	width: 20vw;
	height: 70vh;
	background-color: white;
	/* box-shadow：内外阴影(inset:内阴影,水平阴影,垂直阴影,阴影模糊距离,阴影大小,阴影颜色) */
	box-shadow: 0 0 50px #ccc;
	/* z-index:增加权重 */
	z-index: 999999999;
}
.left-pop-box .top {
	width: 100%;
	height: 10vh;
	background-color: #3796ec;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.content {
	width: 100%;
	height: 5vh;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
}
.content div {
	width: 33.3%;
}
.bottom {
	margin-top: 20px;
}
ul li {
	list-style: none;
}
.drawing-panel {
	z-index: 999;
	position: fixed;
	top: 9.5rem;
	margin-left: 3rem;
	padding: 1rem 1rem;
	border-radius: 0.25rem;
	background-color: #fff;
	box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
	width: 90px;
	height: 30px;
	float: left;
	background-color: #fff;
	color: rgba(27, 142, 236, 1);
	font-size: 14px;
	border: 1px solid rgba(27, 142, 236, 1);
	border-radius: 5px;
	margin: 0 5px;
	text-align: center;
	line-height: 30px;
}
.btn:hover {
	background-color: rgba(27, 142, 236, 0.8);
	color: #fff;
}
</style>
